<template>
  <div>
    <div v-show="showArea == 'up'" :class="['popub-box', showArea == 'up' ? 'popub-active' : showArea == 'down' ? 'popub-down-active' : '']">
      <!-- <div> -->
      <div class="region-box">
        <div class="close-box" @click="$emit('closed')">
          <img src="~@/static/images/volunteer_icon_close.png" alt />
        </div>
        <h2>完善信息</h2>
        <h5>为了更好的服务，需要您补充个人资料</h5>
        <div style="min-height:6.3rem">
          <div class="boxes areas" @click="showAreaPopup = true">
            <h3>所在地区</h3>
            <span class="flex-h">
              <i class="flex1" v-show="!provinceAndCity">请选择省、市、区</i>
              <b class="flex1" v-show="provinceAndCity">{{ provinceAndCity }}</b>
              <em></em>
            </span>
          </div>
          <div class="boxes areas" @click="showSchoolPopup = true" v-show="showsSchool">
            <h3>所在学校</h3>
            <span class="flex-h">
              <i class="flex1" v-show="!schoolName">请选择所就读的学校</i>
              <b class="flex1" v-show="schoolName">{{ schoolName }}</b>
              <em></em>
            </span>
          </div>
          <div class="boxes areas" @click="showClassPopup = true" v-show="showsGrade">
            <h3>所在班级</h3>
            <span class="flex-h">
              <i class="flex1" v-show="!ageClass">请选择所在班级</i>
              <b class="flex1" v-show="ageClass">{{ ageClass }}</b>
              <em></em>
            </span>
          </div>
        </div>
        <div class="complete-btns" v-show="showBtn">
          <sumbitBtn :isSumbit="canClickBtn" message="完成" @btnClick="completeInfo"></sumbitBtn>
        </div>
      </div>
    </div>

    <popup-picker :show.sync="showAreaPopup" @on-change="changesRegion" @on-hide="onHideRegion" class="popiker" :data="regionList" :columns="3" v-model="value4" show-name></popup-picker>
    <popup-picker :show.sync="showSchoolPopup" @on-change="changesSchool" @on-hide="onHideSchool" class="popiker" :data="schoolList" :columns="3" v-model="value5" show-name></popup-picker>

    <popup-picker :show.sync="showClassPopup" :data="classNameList" v-model="value8" class="popiker" @on-change="changesclassName" @on-hide="onHideclassName"></popup-picker>
  </div>
</template>

<script>
import { TransferDom, PopupPicker } from 'vux'
import sumbitBtn from './sumbitBtn'
import { modifyPersonalInfo, getSchoolsById, getCascadeArea } from '~/api/identity'
import ls from 'store2'
export default {
  directives: {
    TransferDom
  },
  components: {
    PopupPicker,
    sumbitBtn
  },
  props: {
    showArea: String
  },
  data() {
    return {
      showBtn: false,
      showsSchool: false,
      showsGrade: false,
      showClassPopup: false,
      value8: [],
      classNameList: [['高一', '高二', '高三'], []],
      ageClass: '',
      sendObj: {},
      schoolList: [],
      value5: [],
      showSchoolPopup: false,
      showAreaPopup: false,
      provice: [],
      citys: [],
      county: [],
      provinceAndCity: '',
      schoolName: '',
      regionList: [],
      value4: []
    }
  },
  computed: {
    canClickBtn: function() {
      if (this.provinceAndCity && this.schoolName && this.ageClass) {
        return true
      } else {
        return false
      }
    }
  },
  mounted: function() {
    // this.getCascadeArea();
    this.createClassNames()
  },
  methods: {
    completeInfo() {
      this.$loading('open')
      modifyPersonalInfo(this.sendObj)
        .then(res => {
          if (res.code == '0') {
            ls.set('userArea', this.povName)
            this.$vux.toast.text('信息绑定成功')

            this.$emit('completes')
          }
          this.$hideLoading()
          this.$vux.toast.text(res.message)
        })
        .catch(() => {
          this.$hideLoading()
        })
    },
    changesclassName(e) {
      this.classNames = e[1]
      this.sendObj.className = this.classNames
      if (e[0] == '高一') {
        this.gradeid = 1
      } else if (e[0] == '高二') {
        this.gradeid = 2
      } else {
        this.gradeid = 3
      }
      this.ageClass = e[0] + e[1]
      // 给发送的数据赋值
      this.sendObj.gradeId = this.gradeid
    },
    onHideclassName(type) {
      if (type) {
        this.ageClass = this.ageClass
        this.showBtn = true
      }
    },
    createClassNames() {
      let singleClassNameList = []
      for (let i = 1; i < 101; i++) {
        singleClassNameList.push(i + '班')
      }
      this.classNameList[1] = singleClassNameList
    },
    getAreaSchool() {
      getSchoolsById(this.areaid)
        .then(res => {
          let school = res.data
          school.forEach(item => {
            this.schoolList.push({
              name: item.schoolName,
              value: item.schoolId + '&' + item.schoolName
            })
          })
          this.showsSchool = true
        })
        .catch(() => {})
    },
    changesSchool(e) {
      this.schoolid = parseInt(e[0])
      this.schoolName = e[0].split('&')[1]
      // 给发送的数据赋值
      this.sendObj.schoolId = this.schoolid
    },
    onHideSchool(type) {
      if (type) {
        this.schoolName = this.schoolName
        this.showsGrade = true
        this.createClassNames()
      }
    },
    getCascadeArea() {
      let _this = this
      this.$loading('open')
      getCascadeArea()
        .then(res => {
          let areaData = res.data
          let arrArea = []
          let arrCity = []
          let ary = []
          let are = []
          areaData.forEach((item, index) => {
            arrArea.push({
              name: item.lable,
              value: index + 'ew',
              parent: 0
            })
            this.provice.push(item)
            arrCity.push(item.list)
          })
          arrCity.forEach((its, index) => {
            its.forEach((i, $index) => {
              ary.push(i.list)
              are.push({
                name: i.lable,
                parent: index + 'ew'
              })
              this.citys.push(i)
            })
          })
          are.forEach((items, index) => {
            arrArea.push({
              name: items.name,
              value: index + 'es',
              parent: items.parent
            })
          })
          ary.forEach((itt, index) => {
            itt.forEach((its, indexs) => {
              arrArea.push({
                name: its.lable,
                value: its.id + '&' + its.lable,
                parent: index + 'es'
              })

              this.county.push(its)
            })
          })

          this.regionList = arrArea
          _this.$hideLoading()
        })
        .catch(() => {
          _this.$hideLoading()
          this.$vux.toast.text('省份数据加载失败，请稍后再试')
        })
        .finally(() => {
          _this.$hideLoading()
        })
    },
    changesRegion(e) {
      this.provinceAndCity = this.provice[parseInt(e[0])].lable + this.citys[parseInt(e[1])].lable + e[2].split('&')[1]
      this.povName = this.provice[parseInt(e[0])].lable
      this.areaid = parseInt(e[2])
      this.provinceid = this.provice[parseInt(e[0])].id
      this.cityid = this.citys[parseInt(e[1])].id
      //   // 给发送的数据赋值
      // this.sendObj.provinceid = this.provinceid;
      // this.sendObj.cityid = this.cityid;
      this.sendObj.areaId = this.areaid
    },
    onHideRegion(type) {
      if (type) {
        this.areaid = this.areaid
        this.schoolList = []
        this.schoolName = ''
        this.getAreaSchool()
      }
    }
  }
}
</script>

<style scoped lang="less">
.popub-box {
  width: 100%;
  height: 100vh;
  /* 高度是变量 */
  position: absolute;
  left: 0;
  top: 100vh;
  z-index: 20;
}
.popub-active {
  animation: animates 0.5s ease;
  overflow: hidden;
  animation-fill-mode: forwards;
}
.popub-down-active {
  animation: animatedown 0.5s ease;
  overflow: hidden;
  animation-fill-mode: forwards;
}
@keyframes animates {
  from {
    height: 0px;
    top: 100vh;
  }

  to {
    height: 100vh;
    top: 0px;
  }
}
@keyframes animatedown {
  from {
    height: 100vh;
    top: 0;
  }

  to {
    height: 0;
    top: 100vh;
  }
}
.region-box {
  width: 100%;
  height: 100%;
  background: #fff;
  .close-box {
    width: 1rem;
    height: 1rem;
    overflow: hidden;
    img {
      display: block;
      width: 0.3rem;
      height: 0.3rem;
      margin: 0.35rem auto;
    }
  }
  h2 {
    font-size: 0.4rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(29, 30, 34, 1);
    line-height: 0.4rem;
    text-align: center;
  }
  h5 {
    font-size: 0.26rem;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 0.4rem;
    text-align: center;
    margin-top: 0.25rem;
  }
  .boxes {
    width: 6.2rem;
    height: 1.9rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
    border-radius: 0.1rem;
    margin: 0.2rem auto 0;

    padding: 0.3rem;
    box-sizing: border-box;
  }
  .areas {
    h3 {
      font-size: 0.28rem;
      font-family: PingFangSC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 0.3rem;
    }
    span {
      margin-top: 0.4rem;
      i,
      b {
        font-size: 0.28rem;
        font-family: PingFangSC;
        font-weight: 400;
        color: rgba(199, 199, 199, 1);
        line-height: 0.4rem;
      }
      b {
        color: rgba(34, 34, 34, 1);
      }
      em {
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -1.3rem;
        background-size: 3rem 2.4rem;
      }
    }
  }
}
.complete-btns {
  width: 100%;
  padding: 0 0.6rem;
  margin-top: 0.5rem;
}
</style>
